<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>查询座位用户信息</title>
  <script type="text/javascript" th:src="@{/js/jquery/jquery-3.3.1.js}" src="js/jquery/jquery-3.3.1.js" ></script>
  <script type="text/javascript" th:src="@{/js/zw.js}" src="js/zw.js" ></script>
<link th:href="@{/css/login.css}" href="css/login.css" rel="stylesheet" type="text/css" media="all"/>
<link rel="stylesheet" th:href="@{/css/cloudstyle.css}" href="css/cloudstyle.css"/>
<!-- layer -->
<link type="text/css" rel="stylesheet" th:href="@{/plug/layui/css/layui.css}" media="all"/>
<script type="text/javascript" th:src="@{/plug/layui/layui.js}"  src="plug/layui/layui.js" ></script>
<style type="text/css">
input::-webkit-input-placeholder {
	color:#fff;
}
#login2 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    padding: 13px 0;
    background: #ffd400;
    display: inline-block;
    width: 50%;
	outline:none;
	border:2px  #FFF;
	cursor:pointer;
	text-transform:uppercase;
}
#login1 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    padding: 13px 0;
    background: #ff3366;
    display: inline-block;
    width: 50%;
	outline:none;
	border:2px  #FFF;
	cursor:pointer;
	text-transform:uppercase;
}
.div-a{ position:fixed; left:20px; top:20px; background:#F00;padding: 10px;color: #FFF;z-index: 999}  
.div-b{ position:fixed; right:20px; top:20px; background:#F00;padding: 10px;color: #FFF;z-index: 999}  
.div-b0{ position:fixed; left:50px; top:60px; padding: 10px;color: #FFF;z-index: 999}
.div-b1{ position:fixed; left:50px; top:90px; padding: 10px;color: #FFF;z-index: 999}
.div-b2{ position:fixed; left:50px; top:120px; padding: 10px;color: #FFF;z-index: 999}  

.div-a101{ position:fixed; right:50px; top:50px; padding: 10px;color: #FFF;z-index: 999}  
.div-c104{ position:fixed; right:50px; top:80px; padding: 10px;color: #FFF;z-index: 999}  
.div-a201{ position:fixed; right:50px; top:110px; padding: 10px;color: #FFF;z-index: 999}  
.div-c202{ position:fixed; right:50px; top:140px; padding: 10px;color: #FFF;z-index: 999}  
.div-a204{ position:fixed; right:50px; top:170px; padding: 10px;color: #FFF;z-index: 999}  
.div-c301{ position:fixed; right:50px; top:200px; padding: 10px;color: #FFF;z-index: 999}  
.div-a303{ position:fixed; right:50px; top:230px; padding: 10px;color: #FFF;z-index: 999}  
.div-c401{ position:fixed; right:50px; top:260px; padding: 10px;color: #FFF;z-index: 999}  
.div-a403{ position:fixed; right:50px; top:290px; padding: 10px;color: #FFF;z-index: 999}  
.div-c501{ position:fixed; right:50px; top:320px; padding: 10px;color: #FFF;z-index: 999}  
.div-a504{ position:fixed; right:50px; top:350px; padding: 10px;color: #FFF;z-index: 999}  

</style>
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>

</head>
<body onkeydown="key_down(event.keyCode);">
<div class="sky" style="position:absolute; width:100%; top:0px;height:100%;opacity:0.75;"></div>
<div class="login-form" style="position:relative;">
		<div class="login" >
			<span ><a  href='/log' target='view_window' ><img src="imgs/hhit/hhit.png" alt="hhit"  style="position: relative; left: 45%; top:-15px; width: 150px; height: 150px;"/></a></span>
		</div>
		<h1><a  href='http://www.jack1996.com:8081/index' target='view_window' style='color:#FFF'>查询座位用户信息</a></h1>
		<a href="/jz">
			<div class="div-a">点我捐助服务器</div>   
		</a>
		<a href="/jz">
			<div class="div-b">点我捐助服务器</div>   
		</a>
		<div class="div-b0" ><h1 id="aa" style="color: #3C3C3C	">今日预约人数：XXXX人</h1></div>
		<div class="div-b1" ><h1 id="ac" style="color: #000093	">当前预约人数：XXXX人</h1></div>
		<div class="div-b2" ><h1 id="cc" style="color: #E1E100	">当前使用人数：XXXX人</h1></div>
		
		<div class="div-a101" ><h1 id="a101" style="color: #AE00AE	">西101：XXXX人</h1></div>
		<div class="div-c104" ><h1 id="c104" style="color: #003D79	">西104：XXXX人</h1></div>
		
		<div class="div-a201" ><h1 id="a201" style="color: #AE00AE	">西201：XXXX人</h1></div>
		<div class="div-c202" ><h1 id="c202" style="color: #003D79	">东202：XXXX人</h1></div>
		
		<div class="div-a204" ><h1 id="a204" style="color: #AE00AE	">西204：XXXX人</h1></div>
		<div class="div-c301" ><h1 id="c301" style="color: #003D79	">西301：XXXX人</h1></div>
		
		<div class="div-a303" ><h1 id="a303" style="color: #AE00AE	">西303：XXXX人</h1></div>
		<div class="div-c401" ><h1 id="c401" style="color: #003D79	">西401：XXXX人</h1></div>
		
		<div class="div-a403" ><h1 id="a403" style="color: #AE00AE	">西403：XXXX人</h1></div>
		<div class="div-c501" ><h1 id="c501" style="color: #003D79	">西501：XXXX人</h1></div>
		
		<div class="div-a504" ><h1 id="a504" style="color: #AE00AE	">西504：XXXX人</h1></div>
		
		<div class="login-top" style="width: 700px;">
		<form class="layui-form">
			<div class="login-ic">
				<i class="layui-icon layui-icon-table" style="font-size: 35px; color: #FFF;"></i>
			      <select lay-filter="zwSelect" lay-verify="required" lay-search id = "zw1" style="width: 400px;height: 38px; margin-left: 4px;color: #000;opacity:0.7;">
			      </select>
				<div class="clear"> </div>
			</div>
			<div class="log-bwn">
				<input type="button"  id="login2" value="查询今天" onclick="toON(1)"><input type="button"  id="login1" value="查询明天" onclick="toON(0)">
			</div>
		</form>
		
		<div class="layui-form">
		  <table class="layui-table">
		    <colgroup>
		      <col width="100">
		      <col width="100">
		      <col width="100">
		      <col width="150">
		      <col width="150">
		      <col>
		    </colgroup>
		    <thead>
		      <tr>
		        <th>座位</th>
		        <th>姓名</th>
		        <th>accno</th>
		        <th>开始时间</th>
		        <th>结束时间</th>
		        <th>当前状态</th>
		      </tr> 
		    </thead>
		    <tbody id="userInfo">
		    </tbody>
		  </table>
		</div>
	</div>
</div>
</body>
</html>
<script type="text/javascript"  th:inline="javascript">
var aa = [[${aa}]];
var ac = [[${ac}]];
var cc = [[${cc}]];
var a101 = [[${a101}]];
var c101 = [[${c101}]];
var a104 = [[${a104}]];
var c104 = [[${c104}]];
var a201 = [[${a201}]];
var c201 = [[${c201}]];
var a202 = [[${a202}]];
var c202 = [[${c202}]];
var a204 = [[${a204}]];
var c204 = [[${c204}]];
var a301 = [[${a301}]];
var c301 = [[${c301}]];
var a303 = [[${a303}]];
var c303 = [[${c303}]];
var a401 = [[${a401}]];
var c401 = [[${c401}]];
var a403 = [[${a403}]];
var c403 = [[${c403}]];
var a501 = [[${a501}]];
var c501 = [[${c501}]];
var a504 = [[${a504}]];
var c504 = [[${c504}]];

function key_down(num){
	if(num == 13) {
		toON(1);
	}
}

layui.use(['layer', 'form', 'layedit', 'laydate'], function(){
  var laydate = layui.laydate;
  var form = layui.form;
  
  form.on('select(zwSelect)', function(data){
		$("#login1").removeAttr("disabled");
		$("#login1").css({'background-color':'#ff3366'});
	  	$("#login2").removeAttr("disabled");
	  	$("#login2").css({'background-color':'#ffd400'});
	});
});

function toON(flag){
	var sid = $("#zw1").val();
	var sname = $("#zw1").find('option:selected').text();
	var ip = returnCitySN['cip'];
	
	var userInfo = "";
	
	if(sid&&(flag==0||flag==1)){
		$.ajax({
			type:"POST",
			async:true,  //默认true,异步
			data:{"sid":sid,"f":flag,"sname":sname,"ip":ip},
			dataType:'json',
			timeout:30000,
			url:"/get",
			success:function(data){
				if(data.result=="fail"){
					layer.alert(data.message, {icon:2});
				}else{
					console.log(data);
					for(j=0; j<data.ts.length; j++){
						var status = " style='color:#FF0000' > 正在使用";
						if(data.ts[j].state == "undo"){
							status = " style='color:#00FF00' >未使用";
						}else if(data.ts[j].state == "forbid"){
							status = " style='color:#C0C0C0' >禁止使用";
						}
						userInfo += '<tr>' +
					        '<td>'+ data.devName +'</td> '+
					        '<td>'+ data.ts[j].owner +'</td> '+
					        '<td>'+ data.ts[j].accno +'</td> '+
					        '<td>'+ data.ts[j].start +'</td> '+
					        '<td>'+ data.ts[j].end +'</td> '+
					        '<td '+ status +'</td> '+
					      '</tr>'; 
					} 
					if(userInfo == ""){
						$("#userInfo").html("");
						layer.alert("此座位无人！", {icon:2});
					}else{						
						$("#userInfo").html(userInfo);
					}
				}
		    },
		    error:function(data) {
		    	layer.alert('服务器错误,请联系开发人员！', {icon: 2});
		    }
		});
	}else{
		if(!sid){
			layer.open({
				  title: '错误提示'
				  ,content: '请选择座位'
			}); 
		}
	}
	$("#login1").attr("disabled","disabled"); 
	$("#login1").css({'background-color':'#708090'});
	$("#login2").attr("disabled","disabled"); 
	$("#login2").css({'background-color':'#888'});
}

function padZero(num) {
    if(num < 10) return "00"+num;
    else if(num<100) return "0"+num;
    return num;
}


$(function(){
	var zw = getZW();
	$("#zw1").html(zw);
	
	$("#aa").html("今日预约人数："+ aa +"人");
	$("#ac").html("当前预约人数："+ ac +"人");
	$("#cc").html("当前使用人数："+ cc +"人");
	
	$("#a101").html("西101："+ padZero(a101) +"人" +" | " + padZero(c101) +"人");
	$("#c104").html("西104："+ padZero(a104) +"人" +" | " + padZero(c104) +"人");
	$("#a201").html("西201："+ padZero(a201) +"人" +" | " + padZero(c201) +"人");
	$("#c202").html("东202："+ padZero(a202) +"人" +" | " + padZero(c202) +"人");
	$("#a204").html("西204："+ padZero(a204) +"人" +" | " + padZero(c204) +"人");
	$("#c301").html("西301："+ padZero(a301) +"人" +" | " + padZero(c301) +"人");
	$("#a303").html("西303："+ padZero(a303) +"人" +" | " + padZero(c303) +"人");
	$("#c401").html("西401："+ padZero(a401) +"人" +" | " + padZero(c401) +"人");
	$("#a403").html("西403："+ padZero(a403) +"人" +" | " + padZero(c403) +"人");
	$("#c501").html("西501："+ padZero(a501) +"人" +" | " + padZero(c501) +"人");
	$("#a504").html("西504："+ padZero(a504) +"人" +" | " + padZero(c504) +"人");
	
	$('body').on('input propertychange', '.login-ic', function(event) {
        $("#login1").removeAttr("disabled");
    	$("#login1").css({'background-color':'red'});
    });
});
</script>